<template>
	<!-- pages/splash/splash.wxml -->
	<view class="splash-container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="line line-1"></view>
			<view class="line line-2"></view>
			<view class="line line-3"></view>
			<view class="line line-4"></view>
		</view>

		<!-- 主要内容 -->
		<view class="content" v-if="showContent" :animation="animationData">
			<!-- 圆形图片容器 -->
			<view class="image-container">
				<view class="image-circle">
					<image class="main-image" src="/static/images/splash-bg.svg" mode="aspectFill" />
				</view>
				<!-- 装饰线条 -->
				<!-- <view class="decoration-lines">
                <view class="deco-line deco-line-1"></view>
                <view class="deco-line deco-line-2"></view>
                <view class="deco-line deco-line-3"></view>
            </view> -->
			</view>

			<!-- 品牌标题 -->
			<view class="brand-section">
				<view class="brand-dots">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>

				<view class="brand-title">
					<text class="title-main">民宿</text>
					<view class="leaf-icon">
						<text class="leaf">🍃</text>
					</view>
				</view>

				<view class="brand-subtitle">
					<text>简于生活，心归自然</text>
				</view>

				<view class="brand-description">
					<text>山间村落民宿，</text>
					<text>静谧美好，清新自然</text>
				</view>
			</view>

			<!-- 装饰植物 -->
			<view class="plant-decoration">
				<view class="plant plant-left">🌿</view>
				<view class="plant plant-right">🌱</view>
			</view>
		</view>

		<!-- 跳过按钮 -->
		<!-- <view class="skip-button" bind:tap="skipToHome" wx:if="{{showContent}}">
    <text>跳过</text>
  </view> -->

		<!-- 加载指示器 -->
		<view class="loading-dots" v-if="!showContent">
			<view class="loading-dot"></view>
			<view class="loading-dot"></view>
			<view class="loading-dot"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
import { config } from '../../api/port.js';
// 类型定义
interface AnimationData {
	[key: string]: any;
}

// 响应式数据
const animationData = ref<AnimationData>({});
const showContent = ref<boolean>(false);

/**
 * 启动动画
 */
const startAnimation = (): void => {
	// 延迟显示内容，创建淡入效果
	setTimeout(() => {
		showContent.value = true;

		// 创建动画
		const animation = uni.createAnimation({
			duration: 1000,
			timingFunction: 'ease-in-out'
		});
		animation.scale(1.1).step();
		animation.scale(1).step();
		animationData.value = animation.export();
	}, 300);
};

/**
 * 自动跳转到首页
 */
const autoJump = (): void => {
	setTimeout(() => {
		uni.reLaunch({
			url: '/pages/index/index'
		});
	}, 3000); // 3秒后跳转
};

/**
 * 手动跳转（点击跳过）
 */
const skipToHome = (): void => {
	uni.reLaunch({
		url: '/pages/index/index'
	});
};

const getConfig = async () => {
	const res = await config()
	console.log(res)
}


/**
 * 生命周期函数--监听页面加载
 */
onMounted(() => {
	getConfig()
	startAnimation();
	// autoJump();
});

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
	// 隐藏导航栏
	uni.hideHomeButton();
});

</script>
<style>
/* pages/splash/splash.wxss */
.splash-container {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* 背景装饰线条 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.line {
	position: absolute;
	background: rgba(255, 255, 255, 0.3);
	transform-origin: center;
}

.line-1 {
	width: 200rpx;
	height: 2rpx;
	top: 20%;
	left: 10%;
	transform: rotate(45deg);
}

.line-2 {
	width: 150rpx;
	height: 2rpx;
	top: 30%;
	right: 15%;
	transform: rotate(-30deg);
}

.line-3 {
	width: 100rpx;
	height: 2rpx;
	bottom: 25%;
	left: 20%;
	transform: rotate(60deg);
}

.line-4 {
	width: 180rpx;
	height: 2rpx;
	bottom: 15%;
	right: 10%;
	transform: rotate(-45deg);
}

/* 主要内容 */
.content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

/* 圆形图片容器 */
.image-container {
	position: relative;
	margin-bottom: 80rpx;
}

.image-circle {
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 6rpx solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
	position: relative;
}

.main-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* 装饰线条 */
.decoration-lines {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400rpx;
	height: 400rpx;
	pointer-events: none;
}

.deco-line {
	position: absolute;
	background: rgba(108, 117, 125, 0.2);
	height: 2rpx;
}

.deco-line-1 {
	width: 120rpx;
	top: 20%;
	left: -60rpx;
	transform: rotate(30deg);
}

.deco-line-2 {
	width: 100rpx;
	top: 60%;
	right: -50rpx;
	transform: rotate(-45deg);
}

.deco-line-3 {
	width: 80rpx;
	bottom: 30%;
	left: -40rpx;
	transform: rotate(60deg);
}

/* 品牌区域 */
.brand-section {
	text-align: center;
	color: #2c3e50;
}

.brand-dots {
	display: flex;
	justify-content: center;
	gap: 12rpx;
	margin-bottom: 40rpx;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: #95a5a6;
	animation: pulse 2s infinite;
}

.dot:nth-child(2) {
	animation-delay: 0.3s;
}

.dot:nth-child(3) {
	animation-delay: 0.6s;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

.brand-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
	position: relative;
}

.title-main {
	font-size: 120rpx;
	font-weight: 300;
	letter-spacing: 8rpx;
	color: #2c3e50;
}

.leaf-icon {
	margin-left: 20rpx;
	font-size: 60rpx;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
}

.brand-subtitle {
	font-size: 32rpx;
	color: #7f8c8d;
	margin-bottom: 20rpx;
	letter-spacing: 2rpx;
}

.brand-description {
	font-size: 28rpx;
	color: #95a5a6;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

/* 植物装饰 */
.plant-decoration {
	position: absolute;
	bottom: -100rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 100rpx;
}

.plant {
	font-size: 80rpx;
	opacity: 0.6;
	animation: sway 4s ease-in-out infinite;
}

.plant-left {
	animation-delay: 0s;
}

.plant-right {
	animation-delay: 2s;
}

@keyframes sway {
	0%,
	100% {
		transform: rotate(-5deg);
	}
	50% {
		transform: rotate(5deg);
	}
}

/* 跳过按钮 */
.skip-button {
	position: absolute;
	bottom: 80rpx;
	right: 40rpx;
	z-index: 3;
	padding: 16rpx 32rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 40rpx;
	font-size: 28rpx;
	color: #7f8c8d;
	backdrop-filter: blur(10rpx);
	transition: all 0.3s ease;
}

.skip-button:active {
	background: rgba(255, 255, 255, 0.9);
	transform: scale(0.95);
}

/* 加载指示器 */
.loading-dots {
	display: flex;
	gap: 16rpx;
	position: absolute;
	bottom: 200rpx;
}

.loading-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #bdc3c7;
	animation: bounce 1.4s ease-in-out infinite both;
}

.loading-dot:nth-child(1) {
	animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes bounce {
	0%,
	80%,
	100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}
</style>
